/* eslint-disable react-hooks/exhaustive-deps */
import Layout from './Layout'
import React, { useEffect, useState } from 'react'
import { Button, Col, Empty, Row, Space } from 'antd'
import CheckBox from './CheckBox'
import RedioBox from './RedioBox'
import { getFilterProduct } from '../../store/actions/product.action'
import { useDispatch, useSelector } from 'react-redux'
import { AppState } from '../../store/reducers'
import { ProductState } from '../../store/reducers/product.reducer'
import ProductItem from './ProductItem'

interface MyFilterProps {
    category: string[],
    price: number[]
}
const Shop = () => {
    const [myFilter, setMyFilter] = useState<MyFilterProps>({
        category: [],
        price: []
    })
    const [skip, setSkip] = useState<number>(0)
    const productState = useSelector<AppState, ProductState>(state => state.product)
    const dispatch = useDispatch()

    useEffect(() => {
        setSkip(0)
    }, [myFilter])

    useEffect(() => {
        dispatch(getFilterProduct({ filters:myFilter, skip }))
    }, [myFilter, skip])

    function onClick(params:any) {
        
        setSkip(item => item + 4);
    }
    return (
        <Layout title="拉勾商城" subTitle="shop">
            <Row>
                <Col span="4">
                    <Space size='middle' direction='vertical'>
                        <CheckBox handlerChange={(category: string[]) => {
                            setMyFilter({
                                ...myFilter,
                                category
                            })
                        }} />
                        <RedioBox handleChange={(price: number[]) => {
                            setMyFilter({
                                ...myFilter,
                                price
                            })
                        }} />
                    </Space>

                </Col>
                <Col span="20">
                    <Row gutter={[16, 16]}>
                        {
                            productState.filterProduct.result.data.map(item => (
                                <Col span="6" key={item._id}>
                                    <ProductItem product={item} key={item._id} />
                                </Col>
                            ))
                        }
                    </Row>
                    <Row>
                        {
                            productState.filterProduct.result.size >= 4 ?  <Button onClick={onClick}>加载更多</Button> : <Empty />
                        }
                    </Row>
                </Col>
            </Row>

        </Layout>
    )
}

export default Shop
